<template>
  <el-dialog v-model="visible" class="app-dialog app-contribute-dialog" draggable title="提交管理模板" width="650" @close="handleClose">
    <el-form ref="formRef" :model="modelForm" :rules="rules" class="dialog-form" size="large" scroll-to-error label-width="80px" label-position="right">
      <el-form-item prop="navId" none>
        <el-input v-model="modelForm.navId" type="hidden" />
      </el-form-item>
      <el-form-item prop="categoryId" none>
        <el-input v-model="modelForm.categoryId" type="hidden" />
      </el-form-item>
      <el-form-item label="名称" prop="title">
        <el-input v-model="modelForm.title" placeholder="请输入名称" type="text" />
      </el-form-item>
      <el-form-item label="Github" prop="github">
        <el-input v-model="modelForm.github" placeholder="请输入Github" />
      </el-form-item>
      <el-form-item label="Gitee" prop="gitee">
        <el-input v-model="modelForm.gitee" placeholder="请输入Gitee" />
      </el-form-item>
      <el-form-item label="主页" prop="homepage">
        <el-input v-model="modelForm.homepage" placeholder="请输入主页" />
      </el-form-item>
      <el-form-item label="作者" prop="author">
        <el-input v-model="modelForm.author" placeholder="请输入作者" />
      </el-form-item>
      <el-form-item label="简介" prop="summary">
        <el-input v-model="modelForm.summary" :autosize="{ minRows: 2, maxRows: 4 }" type="textarea" placeholder="请输入简介" />
      </el-form-item>
      <el-row class="mb-5">
        <el-col :span="12">
          <el-form-item label="UI组件" prop="tags">
            <el-select v-model="modelForm.tags" multiple filterable default-first-option :multiple-limit="1" :reserve-keyword="false" class="w-full" placeholder="请选择UI组件" @change="onChangeTags">
              <el-option v-for="item in props.tagList" :key="item.id" :label="item.tagName" :value="item.id" />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item prop="version">
            <span class="svg-container">
              <i class="el-icon-user-solid" />
            </span>
            <el-radio-group v-model="modelForm.version">
              <el-radio :label="3" size="large">Vue3</el-radio>
              <el-radio :label="2" size="large">Vue2</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-col>
      </el-row>
      <el-form-item label="封面图" prop="coverUrl">
        <Upload id="cover1" v-model:imageUrl="modelForm.coverUrl">
          <template #tip> 只能上传jpg/png文件，且不超过2MB </template>
        </Upload>
      </el-form-item>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="handleCancel">取消</el-button>
        <el-button type="primary" @click="onSave"> 提交 </el-button>
      </span>
    </template>
  </el-dialog>
</template>
<script setup lang="ts">
import { ElMessage, FormInstance, FormRules } from 'element-plus'

interface EditProps {
  editVisible: boolean
  createData: any
  dialogStatus?: string
  setEditVisible: any
  tagList: any
}

const props = withDefaults(defineProps<EditProps>(), {
  editVisible: false,
  dialogStatus: 'create',
  createData: () => {},
  setEditVisible: () => {},
  tagList: [],
})
const formRef = ref<FormInstance>()
const rules = reactive<FormRules>({
  title: [{ required: true, trigger: 'blur', message: '请输入模板名称' }],
  author: [{ required: true, trigger: 'blur', message: '请输入作者' }],
  tags: [{ required: true, trigger: 'blur', message: '请选择UI组件' }],
  coverUrl: [{ required: true, trigger: 'change', message: '请上传封面图' }],
})
const modelForm = reactive({
  userId: 1,
  navId: 1,
  categoryId: 0,
  title: '',
  github: '',
  gitee: '',
  homepage: '',
  author: '',
  summary: '',
  tags: '',
  coverUrl: '',
  content: '',
  version: 3,
  status: 1,
})

// 关闭
const handleClose = () => {
  props.setEditVisible()
  formRef.value!.resetFields()
}

const onChangeTags = (val: any) => {
  if (val.length > 1) {
    return false
  }
}

const handleCancel = () => {
  handleClose()
}

// 提交
const onSave = () => {
  formRef
    .value!.validate((valid: any) => {
      if (!valid) return

      const data = unref(modelForm)

      if (!data.github && !data.gitee) {
        ElMessage.error('请输入Github或Gitee仓库地址')
        return
      }

      props.createData(data)

      handleClose()
    })
    .catch((error: any) => {
      console.log('error', error)
    })
    .finally(() => {})

  return false
}

const visible = ref(false)
watch(
  () => props.editVisible,
  (show) => {
    visible.value = show
  }
)
</script>
<style lang="scss"></style>
